<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        .content{
            /* 默认块级元素就是标准盒子 */
            box-sizing: content-box;
            width: 123px;
            height: 134px;
            padding: 15px 17px 23px 36px;
            margin: 8px 19px 37px 14px;
            /* 内边距  上下左右内边距都为10px*/
            /* padding:10px */
            /* 上下内边距为10px 左右为20px */
            /* 上内边距为10px 左右为20px 下内边距为30px */
            /* padding: 10px 20px; */
            /* 外边距 */
            /* margin: 10px; */
            /* 边框 */
            border: 5px solid red;
            /* 线性渐变背景色 */
            background-image: linear-gradient(to right bottom, red,cyan,pink);
        }
    .border{
        /* 边框盒子 */
        box-sizing: border-box;
        width: 136px;
        height: 124px;
        margin: 5px 9px 17px 34px;
        padding: 15px 17px 19px 24px ;
        border: 3px dotted cyan;
        /* 设置背景图片大小 */
        /* background-size :100% 100%; */
        /* 设置径向渐变背景色 */
        background-image: radial-gradient(red,pink,blue);
        /* 设置背景图片 */
        /* background-image: ur1(路径) */
       
    }
    </style>
</head>
<body>
    <!-- 
    css盒模型
    1.标准盒子 w3c盒子 内容盒子
      盒模型计算公式
      盒子宽:盒子宽 : 186px=123px +5px+5px+17px+36px
        内容区宽width+左右内边距+左右边框
      盒子高:182px=134px+5px+5px+15px+23px
        内容区高height+上下内边距+上下边框
      盒子所占页面的宽: 盒子宽+左右外边距 186px+19px+14px=219px
                
      盒子所占页面的高: 盒子高+上下外边距 182px+8+37px=227px
               
    2.边框盒子 怪异盒子 IE盒子
     盒子宽：136px=内容区宽（可变）89px+左右边框6px+左右内边距41px
     盒子高:124px=内容区高（可变）84px+上下边框6px+上下内边距34px
     盒子所占页面的宽:189px=黑子宽+左右外边距=136px+9px+34px
     盒子所占页面的高:146px=盒子高+上下外边距=124px+5px+17px

     -->
    <div class="content">标准盒子</div>
    <div class="border">边框盒子</div>

</body>
</html>